<template>
  <div class="slider" v-show="display">
    <p>热力图参数</p>
    <a-row>
      <span>热点半径</span>
      <a-col :span="6">
        <a-slider
          v-model:value="radius"
          :min="1"
          :max="50"
          @change="changeRad"
        />
      </a-col>
      <a-col :span="2">
        <a-input-number
          v-model:value="radius"
          :min="1"
          :max="50"
          style="margin-left: 16px"
          @change="changeRad"
        />
      </a-col>
    </a-row>
    <a-row>
      <span>模糊半径</span>
      <a-col :span="6">
        <a-slider v-model:value="blur" :min="1" :max="50" @change="changeBlu" />
      </a-col>
      <a-col :span="2">
        <a-input-number
          v-model:value="blur"
          :min="1"
          :max="50"
          :step="1"
          style="margin-left: 16px"
          @change="changeBlu"
        />
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onUnmounted, onMounted } from 'vue'
import mitt from '@/mitt'
import HotMap from '../Hooks/HotMap'
const { changeRadius, changeBlur, showHotMap, closeHotMap } = HotMap()
const { map } = defineProps({
  map: {
    type: Object,
  },
})

const radius = ref(20)
const blur = ref(15)
const display = ref(false)

const showHotMaps = () => {
  showHotMap(map, radius, blur, display)
}
const closeHotMaps = () => {
  closeHotMap(map, display)
}
const changeRad = (n) => {
  changeRadius(n)
}
const changeBlu = (n) => {
  changeBlur(n)
}
// 全局事件总线绑定与解绑
mitt.on('showHotMap', showHotMaps)
mitt.on('closeHotMap', closeHotMaps)
onUnmounted(() => {
  mitt.off('showHotMap', showHotMaps)
  mitt.off('closeHotMap', closeHotMaps)
})
</script>

<style lang="stylus" scoped>
.slider
  position: absolute
  top:100px
  left: 100px
  width: 300px
  height: 150px
  padding: 5px
  text-align: center
  background-color: rgba(255,255,255,0.9)
  border-radius: 10%
  z-index:200
.slider
  p
    font-size:20px
    font-weight:800
.slider
  .ant-row
    padding:5px 0
.slider
  span
    line-height: 32px
    margin-right: 5px
.slider
  .ant-slider
    width: 150px
.slider
 .ant-col-6
  max-width: 100%
.slider
  .ant-input-number
    width: 50px
</style>
